<template>
  <div class="common-layout">
    <div class="header-nav" v-if="$route.name != 'login'">
      <img src="./assets/logo.png" alt="" />
      <el-button type="info" @click="loginOut()" size="large">退出</el-button>
    </div>
    <div class="main-nav">
      <div class="left-nav" v-if="$route.name != 'login'">
        <div class="change-width-button" @click="isCollapse = !isCollapse">
          <el-icon color="white" size="25px">
            <span v-if="isCollapse">
              <Expand />
            </span>
            <span v-else>
              <Fold />
            </span>
          </el-icon>
        </div>
        <el-menu default-active="/" class="el-menu-vertical-demo" :collapse="isCollapse" background-color="#363d40"
          text-color="#fff" :router="true">
          <el-menu-item index="/">
            <el-icon>
              <UserFilled />
            </el-icon>
            <span>首页</span>
          </el-menu-item>
          <!-- 用户管理 -->
          <el-sub-menu index="2">
            <template #title>
              <el-icon>
                <Avatar />
              </el-icon>
              <span>用户管理</span>
            </template>
            <el-menu-item index="/userList">
              <el-icon>
                <Menu />
              </el-icon>
              <span>用户列表</span>
            </el-menu-item>
          </el-sub-menu>
          <!-- 权限管理 -->
          <el-sub-menu index="3">
            <template #title>
              <el-icon>
                <Coin />
              </el-icon>
              <span>权限管理</span>
            </template>
            <el-menu-item index="/userClassfiy">
              <el-icon>
                <Menu />
              </el-icon>
              <span>角色列表</span>
            </el-menu-item>
            <el-menu-item index="/roleList">
              <el-icon>
                <Menu />
              </el-icon>
              <span>权限列表</span>
            </el-menu-item>
          </el-sub-menu>
          <!-- 商品管理 -->
          <el-sub-menu index="4">
            <template #title>
              <el-icon>
                <GoodsFilled />
              </el-icon>
              <span>商品管理</span>
            </template>
            <el-menu-item index="/commList">
              <el-icon>
                <Menu />
              </el-icon>
              <span>商品列表</span>
            </el-menu-item>
            <el-menu-item index="/attrClassfiy">
              <el-icon>
                <Menu />
              </el-icon>
              <span>分类参数</span>
            </el-menu-item>
            <el-menu-item index="/goodsClassfiy">
              <el-icon>
                <Menu />
              </el-icon>
              <span>商品分类</span>
            </el-menu-item>
          </el-sub-menu>
          <!-- 订单详情 -->
          <el-sub-menu index="5">
            <template #title>
              <el-icon>
                <List />
              </el-icon>
              <span>订单详情</span>
            </template>
            <el-menu-item index="/orderList">
              <el-icon>
                <Menu />
              </el-icon>
              <span>订单列表</span>
            </el-menu-item>
          </el-sub-menu>
          <!-- 数据统计 -->
          <el-sub-menu index="6">
            <template #title>
              <el-icon>
                <TrendCharts />
              </el-icon>
              <span>数据统计</span>
            </template>
            <el-menu-item index="/report">
              <el-icon>
                <Menu />
              </el-icon>
              <span>数据报表</span>
            </el-menu-item>
          </el-sub-menu>
        </el-menu>

      </div>
      <div class="right-nav">
        <div class="right-main-nav">
          <router-view></router-view>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from "vue";
import { useRouter, useRoute } from "vue-router";
import { useStore } from "vuex";
const router = useRouter();
const route = useRoute();
// let abc = ref("");
let isCollapse = ref(false);
const store = useStore();
const loginOut = () => {
  console.log("退出");
  store.commit("setToken", "");
  store.commit("saveUserInfo", {});
  router.push({
    name: "login",
  });
};
let padd = computed(() => {
  return route.name == "login" ? "" : "20px";

});

// let bacColor = computed(() => {
//   return route.name == "login" ? "" : "rgba(255, 255, 255, 0.425)";
// });
</script>

<style lang="scss" scoped>
.common-layout {
  height: 100%;
  display: flex;
  flex-direction: column;

  .header-nav {
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    line-height: 60px;
    background-color: #363d40;

    img {
      height: 60px;
    }
  }
}

.main-nav {
  display: flex;
  // height: 100%;
  flex: 1;

  .left-nav {
    height: 100%;
    display: flex;
    flex-direction: column;

    .change-width-button {
      width: 100%;
      text-align: center;
      background-color: #615d5a;
    }

    .el-menu {
      flex: 1;
      border: none;
    }

    .el-menu-vertical-demo:not(.el-menu--collapse) {
      width: 200px;
      min-height: 400px;
    }
  }

  .right-nav {
    position: relative;
    flex: 1;
    // background-color: antiquewhite;
    background-image: linear-gradient(200deg, #fed6e3, #a8edea);
    padding: v-bind(padd);
    display: flex;

    .right-main-nav {
      position: relative;
      flex: 1;
      display: flex;
      // background-color: v-bind(bacColor);
      // padding: v-bind(padd);
    }
  }
}
</style>
